import jQuery from "jquery";
import "jquery-ui/ui/widgets/sortable.js";
import * as bootstrap from "bootstrap";
import flatpickr from "flatpickr";
import I18n from "./i18n";

(function ($) {
  document.addEventListener("rails_admin.dom_ready", function (event) {
    var $editors,
      array,
      config_options,
      goBootstrapWysihtml5s,
      goCkeditors,
      goCodeMirrors,
      goFroalaWysiwygs,
      goSimpleMDEs,
      options;
    var content = event.detail || $("form");
    if (content.length) {
      content.find("[data-datetimepicker]").each(function () {
        flatpickr(
          this,
          $.extend(
            {
              dateFormat: "Y-m-dTH:i:S",
              altInput: true,
              locale: I18n.locale,
            },
            $(this).data("options")
          )
        );
      });
      content.find("[data-enumeration]").each(function () {
        if ($(this).is("[multiple]")) {
          $(this).filteringMultiselect($(this).data("options"));
        } else {
          $(this).filteringSelect($(this).data("options"));
        }
      });
      content.find("[data-fileupload]").each(function () {
        var parent;
        parent = $(this).closest(".controls");
        parent.find(".btn-remove-image").on("click", function () {
          $(this).siblings("[type=checkbox]").click();
          parent.find(".toggle").toggle("slow");
          $(this).toggleClass("btn-danger btn-info");
          return false;
        });
      });
      content.find("[data-fileupload]").change(function () {
        var ext, image_container, input, reader;
        input = this;
        image_container = $("#" + input.id)
          .parent()
          .children(".preview");
        if (!image_container.length) {
          image_container = $("#" + input.id)
            .parent()
            .prepend($("<img />").addClass("preview").addClass("img-thumbnail"))
            .find("img.preview");
          image_container.parent().find("img:not(.preview)").hide();
        }
        ext = $("#" + input.id)
          .val()
          .split(".")
          .pop()
          .toLowerCase();
        if (
          input.files &&
          input.files[0] &&
          $.inArray(ext, ["gif", "png", "jpg", "jpeg", "bmp"]) !== -1
        ) {
          reader = new FileReader();
          reader.onload = function (e) {
            image_container.attr("src", e.target.result);
          };
          reader.readAsDataURL(input.files[0]);
          image_container.show();
        } else {
          image_container.hide();
        }
      });
      content.find("[data-multiple-fileupload]").each(function () {
        $(this)
          .closest(".controls")
          .find(".btn-remove-image")
          .on("click", function () {
            $(this).siblings("[type=checkbox]").click();
            $(this).parent(".toggle").toggle("slow");
            $(this).toggleClass("btn-danger btn-info");
            return false;
          })
          .end()
          .sortable({
            items: ".sortables",
          });
      });
      content.find("[data-multiple-fileupload]").change(function () {
        var ext, file, i, image_container, input, len, ref, results;
        input = this;
        $("#" + input.id)
          .parent()
          .children(".preview")
          .remove();
        ref = input.files;
        results = [];
        for (i = 0, len = ref.length; i < len; i++) {
          file = ref[i];
          ext = file.name.split(".").pop().toLowerCase();
          if ($.inArray(ext, ["gif", "png", "jpg", "jpeg", "bmp"]) === -1) {
            continue;
          }
          image_container = $("<img />")
            .addClass("preview")
            .addClass("img-thumbnail");
          results.push(
            (function (image_container) {
              var reader;
              reader = new FileReader();
              reader.onload = function (e) {
                image_container.attr("src", e.target.result);
              };
              reader.readAsDataURL(file);
              return $("#" + input.id)
                .parent()
                .append(
                  $("<div></div>").addClass("preview").append(image_container)
                );
            })(image_container)
          );
        }
        return results;
      });
      content.find("[data-filteringmultiselect]").each(function () {
        $(this).filteringMultiselect($(this).data("options"));
        if ($(this).parents("#modal").length) {
          $(this).parent().siblings(".modal-actions").remove();
        } else {
          $(this).parents(".control-group").first().remoteForm();
        }
      });
      content.find("[data-filteringselect]").each(function () {
        $(this).filteringSelect($(this).data("options"));
        if ($(this).parents("#modal").length) {
          $(this).parent().siblings(".modal-actions").remove();
        } else {
          $(this).parents(".control-group").first().remoteForm();
        }
      });
      content.find("[data-nestedmany]").each(function () {
        var field, nav, tab_content, toggler;
        field = $(this).parents(".control-group").first();
        nav = field.find("> .controls > .nav");
        tab_content = field.find("> .tab-content");
        toggler = field.find("> .controls > .btn-group > .toggler");
        tab_content
          .children(".fields:not(.tab-pane)")
          .addClass("tab-pane")
          .each(function () {
            $(this).attr(
              "id",
              "unique-id-" +
                new Date().getTime() +
                Math.floor(Math.random() * 100000)
            );
            nav.append(
              $("<li></li>")
                .append(
                  $("<a></a>")
                    .addClass("nav-link")
                    .attr("data-bs-toggle", "tab")
                    .attr("href", "#" + this.id)
                    .text(
                      $(this).children(".object-infos").data("object-label")
                    )
                )
                .addClass("nav-item")
            );
          });
        if (nav.find("> li.active").length === 0) {
          nav
            .find("> li > a[data-bs-toggle='tab']:first")
            .each(function (index, element) {
              bootstrap.Tab.getOrCreateInstance(element).show();
            });
        }
        if (nav.children().length === 0) {
          toggler
            .addClass("disabled")
            .removeClass("active")
            .children("i")
            .addClass("fa-chevron-right");
        } else {
          if (toggler.hasClass("active")) {
            $(toggler.data("bs-target")).addClass("show");
            toggler.children("i").addClass("fa-chevron-down");
          } else {
            toggler.children("i").addClass("fa-chevron-right");
          }
        }
      });
      content.find("[data-nestedone]").each(function () {
        var field, first_tab, nav, tab_content, toggler;
        field = $(this).parents(".control-group").first();
        nav = field.find("> .controls > .nav");
        tab_content = field.find("> .tab-content");
        toggler = field.find("> .controls > .btn-group > .toggler");
        tab_content
          .children(".fields:not(.tab-pane)")
          .addClass("tab-pane active")
          .each(function () {
            field
              .find("> .controls .add_nested_fields")
              .removeClass("add_nested_fields")
              .text($(this).children(".object-infos").data("object-label"));
            nav.append(
              $("<li></li>").append(
                $("<a></a>")
                  .attr("data-bs-toggle", "tab")
                  .attr("href", "#" + $(this).id)
                  .text($(this).children(".object-infos").data("object-label"))
              )
            );
          });
        first_tab = nav.find("> li > a[data-bs-toggle='tab']:first");
        first_tab.each(function (index, element) {
          bootstrap.Tab.getOrCreateInstance(element).show();
        });
        field
          .find("> .controls > [data-target]:first")
          .html('<i class="fas"></i> ' + first_tab.html());
        nav.hide();
        if (nav.children().length === 0) {
          toggler
            .addClass("disabled")
            .removeClass("active")
            .children("i")
            .addClass("fa-chevron-right");
        } else {
          if (toggler.hasClass("active")) {
            $(toggler.data("bs-target")).addClass("show");
            toggler.children("i").addClass("fa-chevron-down");
          } else {
            toggler.children("i").addClass("fa-chevron-right");
          }
        }
      });
      content.find("[data-polymorphic]").each(function () {
        var field, object_select, type_select, urls;
        type_select = $(this);
        field = type_select.parents(".control-group").first();
        object_select = field.find("select").last();
        urls = type_select.data("urls");
        type_select.on("change", function (e) {
          var selected_data, selected_type;
          selected_type = type_select.val().toLowerCase().replace(/::/g, "-");
          selected_data = $("#" + selected_type + "-js-options").data(
            "options"
          );
          object_select.data("options", selected_data);
          object_select.filteringSelect("destroy");
          object_select.filteringSelect(selected_data);
        });
      });
      goSimpleMDEs = function () {
        return content
          .find("[data-richtext=simplemde]")
          .not(".simplemded")
          .each(function (index, domEle) {
            var instance_config, options;
            options = $(this).data("options");
            instance_config = options.instance_config;
            new window.SimpleMDE(
              $.extend(
                true,
                {
                  element: document.getElementById(this.id),
                  autosave: {
                    uniqueId: this.id,
                  },
                },
                instance_config
              )
            );
            $(this).addClass("simplemded");
          });
      };
      $editors = content.find("[data-richtext=simplemde]").not(".simplemded");
      if ($editors.length) {
        if (!window.SimpleMDE) {
          options = $editors.first().data("options");
          $("head").append(
            '<link href="' +
              options["css_location"] +
              '" rel="stylesheet" media="all" type="text/css">'
          );
          $.getScript(
            options["js_location"],
            function (script, textStatus, jqXHR) {
              return goSimpleMDEs();
            }
          );
        } else {
          goSimpleMDEs();
        }
      }
      goCkeditors = function () {
        return content
          .find("[data-richtext=ckeditor]")
          .not(".ckeditored")
          .each(function (index, domEle) {
            var instance;
            try {
              if ((instance = window.CKEDITOR.instances[this.id])) {
                instance.destroy(true);
              }
            } catch (error1) {}
            window.CKEDITOR.replace(this, $(this).data("options").options);
            $(this).addClass("ckeditored");
          });
      };
      $editors = content.find("[data-richtext=ckeditor]").not(".ckeditored");
      if ($editors.length) {
        if (!window.CKEDITOR) {
          options = $editors.first().data("options");
          window.CKEDITOR_BASEPATH = options["base_location"];
          $.getScript(
            options["jspath"],
            (function (_this) {
              return function (script, textStatus, jqXHR) {
                return goCkeditors();
              };
            })(this)
          );
        } else {
          goCkeditors();
        }
      }
      goCodeMirrors = (function (_this) {
        return function (array) {
          return array.each(function (index, domEle) {
            var textarea;
            options = $(this).data("options");
            textarea = this;
            $.getScript(
              options["locations"]["mode"],
              function (script, textStatus, jqXHR) {
                options = $(domEle).data("options");
                $("head").append(
                  '<link href="' +
                    options["locations"]["theme"] +
                    '" rel="stylesheet" media="all" type="text/css">'
                );
                CodeMirror.fromTextArea(textarea, options["options"]);
                return $(textarea).addClass("codemirrored");
              }
            );
          });
        };
      })(this);
      array = content.find("[data-richtext=codemirror]").not(".codemirrored");
      if (array.length) {
        this.array = array;
        if (!window.CodeMirror) {
          options = $(array[0]).data("options");
          $("head").append(
            '<link href="' +
              options["csspath"] +
              '" rel="stylesheet" media="all" type="text/css">'
          );
          $.getScript(
            options["jspath"],
            (function (_this) {
              return function (script, textStatus, jqXHR) {
                return goCodeMirrors(_this.array);
              };
            })(this)
          );
        } else {
          goCodeMirrors(this.array);
        }
      }
      goBootstrapWysihtml5s = (function (_this) {
        return function (array, config_options) {
          return array.each(function () {
            $(this).addClass("bootstrap-wysihtml5ed");
            $(this).closest(".controls").addClass("well");
            $(this).wysihtml5(config_options);
          });
        };
      })(this);
      array = content
        .find("[data-richtext=bootstrap-wysihtml5]")
        .not(".bootstrap-wysihtml5ed");
      if (array.length) {
        this.array = array;
        options = $(array[0]).data("options");
        config_options = $.parseJSON(options["config_options"]);
        if (!window.wysihtml5) {
          $("head").append(
            '<link href="' +
              options["csspath"] +
              '" rel="stylesheet" media="all" type="text/css">'
          );
          $.getScript(
            options["jspath"],
            (function (_this) {
              return function (script, textStatus, jqXHR) {
                return goBootstrapWysihtml5s(_this.array, config_options);
              };
            })(this)
          );
        } else {
          goBootstrapWysihtml5s(this.array, config_options);
        }
      }
      goFroalaWysiwygs = (function (_this) {
        return function (array) {
          return array.each(function () {
            var uploadEnabled;
            options = $(this).data("options");
            config_options = $.parseJSON(options["config_options"]);
            if (config_options) {
              if (!config_options["inlineMode"]) {
                config_options["inlineMode"] = false;
              }
            } else {
              config_options = {
                inlineMode: false,
              };
            }
            uploadEnabled = config_options["imageUploadURL"]
              ? (config_options["imageUploadParams"] = {
                  authenticity_token: $("meta[name=csrf-token]").attr(
                    "content"
                  ),
                })
              : void 0;
            $(this).addClass("froala-wysiwyged");
            $(this).froalaEditor(config_options);
            if (uploadEnabled) {
              $(this)
                .on("froalaEditor.image.error", function (e, editor, error) {
                  alert("error uploading image: " + error.message);
                })
                .on("froalaEditor.image.removed", function (e, editor, $img) {
                  editor.options.imageDeleteParams = {
                    src: $img.attr("src"),
                    authenticity_token: $("meta[name=csrf-token]").attr(
                      "content"
                    ),
                  };
                  editor.deleteImage($img);
                })
                .on(
                  "editable.imageDeleteSuccess",
                  function (e, editor, data) {}
                )
                .on("editable.imageDeleteError", function (e, editor, error) {
                  alert("error deleting image: " + error.message);
                });
            }
          });
        };
      })(this);
      array = content
        .find("[data-richtext=froala-wysiwyg]")
        .not(".froala-wysiwyged");
      if (array.length) {
        options = $(array[0]).data("options");
        if (!$.isFunction($.fn.editable)) {
          $("head").append(
            '<link href="' +
              options["csspath"] +
              '" rel="stylesheet" media="all" type="text/css">'
          );
          $.getScript(
            options["jspath"],
            (function (_this) {
              return function (script, textStatus, jqXHR) {
                return goFroalaWysiwygs(array);
              };
            })(this)
          );
        } else {
          goFroalaWysiwygs(array);
        }
      }
      return content.find("trix-editor").each(function () {
        if (!window.Trix) {
          options = $(this).data("options");
          if (options.warn_dynamic_load) {
            console.warn(
              "ActionText assets should be loaded statically. Follow instructions in https://github.com/railsadminteam/rails_admin/wiki/ActionText"
            );
          }
          $("head").append(
            '<link href="' +
              options["csspath"] +
              '" rel="stylesheet" media="all" type="text/css">'
          );
          return $.getScript(options["jspath"]);
        }
      });
    }
  });
})(jQuery);
